<template>
	<view class="qiun-columns">
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
			<view class="qiun-title-dot-light">环形图</view>
		</view>
		<view class="qiun-charts" >
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasRing" id="canvasRing" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}" @touchstart="touchRing"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
			<!--#endif-->
		</view>
		
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	var _self;
		var canvaRing=null;
	   
		export default {
			data() {
				return {
					cWidth:'',
					cHeight:'',
					pixelRatio:1,
					textarea:'',
				}
			},
			onLoad() {
				_self = this;
				//#ifdef MP-ALIPAY
				uni.getSystemInfo({
					success: function (res) {
						if(res.pixelRatio>1){
							_self.pixelRatio =2;
						}
					}
				});
				//#endif
				this.cWidth=uni.upx2px(750);
				this.cHeight=uni.upx2px(500);
				this.getServerData();
			},
			methods: {
				getServerData(){
					let Ring={series:[]};
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					// Ring.series=res.data.data.Ring.series;
					console.log(res.data.data.Ring.series)
					Ring.series=[
						{color: "#5B9CEC",data: 40,name: "1-2分",type: "ring"},
						{color: "#CF5BEC",data: 20,name: "3-4分",type: "ring"},
						{color: "#FFA200",data: 20,name: "5-6分",type: "ring"},
						{color: "#FF5C95",data: 10,name: "7-8分",type: "ring"},
						{color: "#1BD6DA",data: 10,name: "9-10分",type: "ring"}
					]
					//自定义文案示例，需设置format字段
					// for(let i = 0 ;i < Ring.series.length;i++){
					// 	Ring.series[i].format=()=>{return Ring.series[i].name+Ring.series[i].data};
					// }
					// _self.textarea = JSON.stringify(res.data.data.Ring);
					_self.showRing("canvasRing",Ring);
				},
				showRing(canvasId,chartData){
					canvaRing=new uCharts({
						$this:_self,
						canvasId: canvasId,
						type: 'ring',
						fontSize:11,
						padding:[20,5,5,5],
						legend:{
							show:true,
							position:'bottom',
							float:'center',
							itemGap:10,
							padding:5,
							lineHeight:26,
							margin:5,
							borderWidth :1,
							data: ["1-2分", "3-4分", "5-6分", "7-8分", "9-10分"]
						},
						background:'#FFFFFF',
						pixelRatio:_self.pixelRatio,
						series: chartData.series,
						animation: false,
						width: _self.cWidth*_self.pixelRatio,
						height: _self.cHeight*_self.pixelRatio,
						disablePieStroke: true,
						dataLabel: true,
						subtitle: {
							name: '7.8分',
							color: '#7cb5ec',
							fontWeight:700,
							fontSize: 25*_self.pixelRatio,
						},
						title: {
							name: '综合评分',
							color: '#666666',
							fontWeight:600,
							fontSize: 15*_self.pixelRatio,
						},
						extra: {
							pie: {
							  offsetAngle: 0,
							  ringWidth: 20*_self.pixelRatio,
							  labelWidth:15
							}
						},
					});
				},
				touchRing(e){
					canvaRing.touchLegend(e, {
						animation : false
					});
					canvaRing.showToolTip(e, {
						format: function (item) {
							return item.name + ':' + item.data 
						}
					});
				},
				changeData(){
					if(isJSON(_self.textarea)){
						let newdata=JSON.parse(_self.textarea);
						canvaRing.updateData({
							series: newdata.series,
							categories: newdata.categories
						});
					}else{
						uni.showToast({
							title:'数据格式错误'
						})
					}
				}
			}
		}
	</script>
	
	<style>
		/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
		.qiun-charts {
			width: 750upx;
			height: 500upx;
			background-color: #FFFFFF;
		}
		
		.charts {
			width: 750upx;
			height: 500upx;
			background-color: #FFFFFF;
		}
	</style>
	